<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>docker管理台主页</title>
    <!--<link rel="icon" href="/static/images/logo.png">-->
    <link rel="stylesheet" href="/static/style/home.css">
    <link rel="stylesheet" href="/static/style/common.css">
    <script src="/static/jquery-1.12.4.js"></script>

    <style>
        .c_tab_main_images, .c_tab_main_store {
            height: 100%;
        }

        .c_imagesmanager_iframe, .c_storemanager_iframe {
            width: 100%;
            height: calc(100% - 60px);
        }

        .c_radio_style {
            margin-left: 60px;
            margin-right: 5px;
            margin-top: 20px;
        }

        .c_radio_choose_01 {
            margin-left: 60px;
            margin-right: 5px;
            margin-top: 10px;

        }

        .c_item_style_02 {
            margin-left: 30px;
            margin-right: 30px;
            margin-top: 10px;

        }

        .c_radio_choose_01 .c_item_style_01 {
            padding: 5px;
        }

        .c_div_style_02 {
            width: 700px;
            padding-top: 10px;
        }

        .c_div_style_02 label {
            width: 150px;
            text-align: right;
        }

        .cc_choose span {
            font: 18px/30px "Microsoft YaHei";
        }

        .c_model_add_image_div_input {
            /*height: 500px;*/
            /*background-color: rgb(240,240,240);*/
        }

        .class_model_add_container_ui {
            position: fixed;
            left: 50%;
            top: 50%;
            width: 650px;
            height: 600px;
            margin-top: -300px;
            margin-left: -300px;
            background-color: white;
            z-index: 11;
        }


    </style>

    <script>

        var current_host_address = "";

        var choose_type_for_add_images = 0;

        function init_create_image_type() {
            var current_value = $("#id_select_create_image_type").val();
            if (current_value == '上传一个本地镜像') {
                // alert(current_value);
                $(".c_choose_container").addClass('class_hide_mask_div');
                $(".c_upload_local_image").removeClass('class_hide_mask_div');
                choose_type_for_add_images = 0;
            } else if (current_value == '创建一个本地镜像') {
                // alert(current_value);
                $(".c_choose_container").removeClass('class_hide_mask_div');
                $(".c_upload_local_image").addClass('class_hide_mask_div');
                choose_type_for_add_images = 1;
            } else if (current_value == '下载一个远程镜像') {
                choose_type_for_add_images = 2;
                $(".c_upload_local_image").addClass('class_hide_mask_div');
                $(".c_choose_container").addClass('class_hide_mask_div');
            }
        }

        function init_select_container() {
            var node_name = $("#id_select_nodes").val()
            // alert(node_name);
            var urlpath = '/container'
            $("#id_select_container").empty();
            $.ajax({
                url: urlpath,
                type: 'GET',
                data: {
                    'node_name': node_name,
                    'action': 'getAllContainer'
                },
                dataType: 'json',
                success: function (data) {
                    // alert(data['data'])
                    for (var i = 0; i < data.data.length; i++) {
                        var tmp_container_name = data.data[i]
                        tmp_container_name = "<option>" + tmp_container_name + "</option>"
                        $("#id_select_container").append(tmp_container_name);
                    }
                },
                error: function (error) {

                }
            });

        }

        function init_select_image() {
            var node_name = $("#id_select_container_nodes").val();
            var urlpath = '/imagesmanager';
            $("#id_select_image").empty();
            $("#id_input_mem_size").val("");
            $.ajax({
                url: urlpath,
                type: 'GET',
                data: {
                    'node_name': node_name,
                    'action': 'getAllImages'
                },
                dataType: 'json',
                success: function (data) {
                    for (var i = 0; i < data.data.length; i++) {
                        var tmp_image_name = data.data[i]['image_name']
                        tmp_image_namev = "<option>" + tmp_image_name + "</option>"
                        $("#id_select_image").append(tmp_image_namev);
                    }

                    $("#id_select_cpu_core").empty();
                    $("#id_input_mem_size").empty();
                    var nodeNCPU = data.data[0]['nodeNCPU']
                    for (var j = 0; j < nodeNCPU; j++) {
                        var tmp_ncpu = j + 1;
                        tmp_ncpu = "<option>" + tmp_ncpu + "</option>"
                        $("#id_select_cpu_core").append(tmp_ncpu);
                    }

                    var nodeMemTotal = data.data[0]['nodeMemTotal'];
                    nodeMemTotal = parseInt(nodeMemTotal / 1024 / 1024);
                    var placeholderv = '256 ~ ' + nodeMemTotal;
                    $("#id_input_mem_size").attr('placeholder', placeholderv);

                    current_host_address = data.data[0]['host_addr']

                },
                error: function (error) {

                }
            });

        }

        function init_nodes_func() {
            var urlpath = '/hostlist'
            $.ajax({
                url: urlpath,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $("#id_select_container_nodes").empty();
                    for (var i = 0; i < data.data.length; i++) {
                        var tmp_node_name = data.data[i]['hostname']
                        var tmp_node_status = data.data[i]['status']
                        if (tmp_node_status == '0') {
                            tmp_node_name = "<option>" + tmp_node_name + "</option>"
                            $("#id_select_container_nodes").append(tmp_node_name);
                        }
                    }

                    init_select_image();
                }
            });
        }

        function hide_mask_div() {
            $(".c_model_add_container_ui").addClass('class_hide_mask_div');
        }

        function create_container_timer_info(arg1, timer, arg3) {
            $("#idModelAddContainerDivMessage").html(arg3);
            if (arg1 == 'info') {
                $("#idModelAddContainerDivMessage").css('color', 'green');
            } else {
                $("#idModelAddContainerDivMessage").css('color', 'red');
            }

            function cleanMessage() {
                $("#idModelAddContainerDivMessage").html("");
            }

            if (timer != 0) {
                window.setTimeout(cleanMessage, timer);
            }
        }

        function create_container_to_node() {
            create_container_timer_info('info', 0, "正在创建容器,请勿刷新此界面  ... ");

            var container_arg_name = $("#id_input_container_name").val();
            var container_arg_nodes = $("#id_select_container_nodes").val();
            var container_arg_image = $("#id_select_image").val();
            var container_arg_command = $("#id_input_command").val();
            var container_arg_core = $("#id_select_cpu_core").val();
            var container_arg_mem = $("#id_input_mem_size").val();

            var container_arg_ports = $("#id_input_port_mapped").val();
            var container_arg_dirs = $("#id_input_dir_mapped").val();

            var list_arg = [
                container_arg_name,
                container_arg_nodes,
                container_arg_image,
                container_arg_command,
                container_arg_core,
                container_arg_mem
            ];
            for (var i = 0; i < list_arg.length; i++) {
                if (list_arg[i] == '') {
                    create_container_timer_info('warning', 10000, '必填项不能够为空！');
                    return;
                }
            }

            var host_addr = current_host_address;
            current_host_address = "";

            var urlPath = '/managercontainer';
            $.ajax({

                url: urlPath,
                type: 'POST',
                dataType: 'json',
                data: {
                    'container_arg_name': container_arg_name,
                    'container_arg_nodes': container_arg_nodes,
                    'container_arg_image': container_arg_image,
                    'container_arg_command': container_arg_command,
                    'container_arg_core': container_arg_core,
                    'container_arg_mem': container_arg_mem,
                    'container_arg_ports': container_arg_ports,
                    'container_arg_dirs': container_arg_dirs,
                    'action': 'add',
                    'hostaddress': host_addr,

                },
                success: function (data) {
                    if (data.status == true) {
                        hide_mask_div()
                        document.getElementById('idIframeContainerManager').contentWindow.location.reload(true);
                        // create_container_timer_info('info', 10000, "执行任务成功");
                        alert("执行任务成功");
                    } else {
                        document.getElementById('idIframeContainerManager').contentWindow.location.reload(true);
                        create_container_timer_info('warn', 10000, data.error);
                    }
                },
                error: function () {
                    create_container_timer_info('warn', 10000, "创建容器失败！");
                }

            });


        }

        $(function () {
            $("#id_select_create_image_type").bind('change', function () {
                init_create_image_type()
            });

            $('#id_select_nodes').on('input propertychange', function () {
                init_select_container();
            });

            $('#id_select_container_nodes').on('input propertychange', function () {
                init_select_image();
            });

            $("#id_btn_logout").click(function () {
                var result = confirm('是否注销！');
                if (result) {
                    $.ajax({
                        url: '/logout',
                        type: 'POST',
                        dataType: 'json',
                        data: $("#login_form").serialize(),
                        success: function (data) {
                            window.location = "/login";
                        }
                    });
                }
            });

            $(".c_left_item").click(function () {
                var buttonValue = this.innerHTML;
                var list_tab_div = document.getElementsByClassName("c_tab_div_rem");
                for (var i = 0; i < list_tab_div.length; i++) {
                    var tabValue = list_tab_div[i].innerHTML;
                    if (tabValue.indexOf(buttonValue) != -1) {
                        list_tab_div[i].classList.remove("item_tab_remove_div");
                        if (buttonValue == "主机管理") {
                            // 默认点击左侧的页面按钮能够使当前功能页面自动刷新一下
                            document.getElementById('idIframeHostManager').contentWindow.location.reload(true);
                        } else if (buttonValue == "镜像管理") {
                            document.getElementById('idIframeImageManager').contentWindow.location.reload(true);
                        }
                    } else {
                        list_tab_div[i].classList.add("item_tab_remove_div");
                    }
                }
            });

            $("#id_add_host_button_ui").click(function () {
                //点击添加按钮弹出的添加主机功能的界面
                $(".c_model_ui").removeClass('class_hide_mask_div');
            });

            $("#id_button_cel").click(function () {
                // 添加主机对话框点击取消按钮
                $(".c_model_ui").addClass('class_hide_mask_div');
            });

            $("#id_button_image_cel").click(function () {
                // 添加主机对话框点击取消按钮
                $(".c_model_add_image_ui").addClass('class_hide_mask_div');
            });

            $("#id_button_add").click(function () {
                //添加主机对话框点击添加按钮功能
                var input_hostname = $("#inputHostNameM").val();
                var input_hostaddr = $("#inputHostAddressM").val();
                var input_hostdesc = $("#describeM").val();

                if (input_hostname == "" || input_hostaddr == "") {
                    $("#idModelAddHostDivMessage").html("主机地址/主机名 不能为空 !");

                    function cleanMessage() {
                        $("#idModelAddHostDivMessage").html("");
                    }

                    window.setTimeout(cleanMessage, 3000);
                    return
                } else {
                    var urlpath = '/host'
                    $.ajax({
                        url: urlpath,
                        type: 'POST',
                        dataType: 'json',

                        data: {
                            'action': 'add',
                            'host_name': input_hostname,
                            'host_addr': input_hostaddr,
                            'host_desc': input_hostdesc
                        },
                        success: function (data) {
                            if (data.status == false) {
                                $("#idModelAddHostDivMessage").html(data.error);

                                function cleanMessage() {
                                    $("#idModelAddHostDivMessage").html("");
                                }

                                window.setTimeout(cleanMessage, 3000);
                                return
                            } else {
                                $(".c_model_ui").addClass('class_hide_mask_div');

                                function cleanMessage() {
                                    $("#inputHostNameM").html("");
                                    $("#inputHostAddressM").html("");
                                    $("#describeM").html("");
                                }

                                window.setTimeout(cleanMessage, 3000);
                            }
                            document.getElementById('idIframeHostManager').contentWindow.location.reload(true);
                        }
                    });
                }
            });

            $("#id_update_host_button_ui").click(function () {
                document.getElementById('idIframeHostManager').contentWindow.location.reload(true);
            });

            $("#id_update_images_button_ui").click(function () {
                document.getElementById('idIframeImageManager').contentWindow.location.reload(true);
            });

            $("#id_add_images_button_ui").click(function () {
                //在镜像管理界面点击添加按钮的时候的功能
                init_create_image_type();

                $(".c_model_add_image_ui").removeClass('class_hide_mask_div');
                $("#id_select_nodes").empty();
                var urlpath = '/hostlist'
                $.ajax({
                    url: urlpath,
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        for (var i = 0; i < data.data.length; i++) {
                            var tmp_node_name = data.data[i]['hostname']
                            var tmp_node_status = data.data[i]['status']
                            if (tmp_node_status == '0') {
                                tmp_node_name = "<option>" + tmp_node_name + "</option>"
                                $("#id_select_nodes").append(tmp_node_name);
                            }
                        }

                        //在这里添加索引不同节点的地方
                        init_select_container();
                    }
                });


            });

            $("#id_update_container_button_ui").click(function () {
                document.getElementById('idIframeContainerManager').contentWindow.location.reload(true);
            });

            $("#id_add_container_button_ui").click(function () {
                //点击创建按钮
                // alert('点击创建按钮');
                $(".c_model_add_container_ui").removeClass('class_hide_mask_div');
                init_nodes_func();
            });

        });

        function imageCreate() {

            var image_name = $('#id_input_image_name').val();
            if (image_name == '') {
                $(".c_uploadfile_label_info02").html("镜像名不能为空 !");
                $(".c_uploadfile_label_info02").css('color', 'red');

                function cleanMessage() {
                    $(".c_uploadfile_label_info02").html("");
                    $(".c_uploadfile_label_info02").css('color', 'green');
                }

                window.setTimeout(cleanMessage, 3000);
                return
            }

            if (choose_type_for_add_images == 0) {
                var form_data = new FormData();
                var file_info = $('#id_file_upload02')[0].files[0];
                var file_name = file_info.name;
                var node_name = $("#id_select_nodes").val();

                form_data.append('file', file_info);
                if (file_info == undefined) {
                    alert('你没有选择任何文件');
                    return false;
                }
                $(".c_uploadfile_label_info02").html("正在上传镜像文件，请勿刷新面 ...");
                $(".c_uploadfile_label_info02").css('color', 'green');
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: form_data,
                    processData: false, //tell jquery not to process the data
                    contentType: false, //tell jquery not to set contentType
                    success: function (callback) {
                        // alert('上传文件完成');
                        $(".c_uploadfile_label_info02").html("正在执行导入镜像操作，请勿刷新面 ...");
                        $(".c_uploadfile_label_info02").css('color', 'green');

                        // 在这里添加执行导入镜像的操作
                        $.ajax({
                            url: '/importimages',
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                'file_name': file_name,
                                'image_name': image_name,
                                'node_name': node_name,
                                'image_des': image_des,
                                'action': 'import'
                            },
                            success: function (callback) {
                                if (callback['status'] == true) {
                                    $(".c_uploadfile_label_info02").html("");
                                    $(".c_uploadfile_label_info02").css('color', 'green');
                                    $(".c_model_add_image_ui").addClass('class_hide_mask_div');
                                    alert('导入镜像成功');
                                } else {
                                    $(".c_uploadfile_label_info02").html("导入镜像失败 !");
                                    $(".c_uploadfile_label_info02").css('color', 'red');
                                }
                            },
                            error: function () {
                                $(".c_uploadfile_label_info02").html("导入镜像失败 !");
                                $(".c_uploadfile_label_info02").css('color', 'red');
                            }
                        });


                    },
                    error: function () {
                        $(".c_uploadfile_label_info02").html("上传文件失败 !");
                        $(".c_uploadfile_label_info02").css('color', 'red');
                        alert('上传文件失败');
                    }
                });

            } else if (choose_type_for_add_images == 1) {
                // alert('not hava kaifa ...');
                //在这里添加创建本地镜像的方法
                var node_name = $("#id_select_nodes").val();
                var image_name = $('#id_input_image_name').val();
                var container_name = $('#id_select_container').val();
                var image_des = $("#id_textarea_image_des").val();
                $(".c_uploadfile_label_info02").html("正在执行创建镜像操作，请勿刷新面 ...");
                $(".c_uploadfile_label_info02").css('color', 'green');
                $.ajax({
                    url: '/importimages',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'node_name': node_name,
                        'image_name': image_name,
                        'container_name': container_name,
                        'image_des': image_des,
                        'action': 'localcreate'
                    },
                    success: function (callback) {
                        $(".c_uploadfile_label_info02").html("");
                        $(".c_uploadfile_label_info02").css('color', 'green');
                        $(".c_model_add_image_ui").addClass('class_hide_mask_div');
                        alert('创建本地镜像成功');
                        document.getElementById('idIframeImageManager').contentWindow.location.reload(true);
                    },
                    error: function (data) {
                        $(".c_uploadfile_label_info02").html("创建镜像失败 !");
                        $(".c_uploadfile_label_info02").css('color', 'red');
                        alert('创建镜像失败');
                        document.getElementById('idIframeImageManager').contentWindow.location.reload(true);
                    }
                })
            } else if (choose_type_for_add_images == 2) {
                //在这里添加下载一个镜像的功能 -top
                var node_name = $("#id_select_nodes").val();
                var image_name = $('#id_input_image_name').val();
                var image_des = $("#id_textarea_image_des").val();

                $(".c_uploadfile_label_info02").html("正在下载镜像，请勿刷新面 ...");
                $(".c_uploadfile_label_info02").css('color', 'green');

                $.ajax({
                    url: '/importimages',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'node_name': node_name,
                        'image_name': image_name,
                        'image_des': image_des,
                        'action': 'dockerpullcreate'
                    },
                    success: function (callback) {
                        if (callback['status'] == true) {
                            $(".c_uploadfile_label_info02").html("");
                            $(".c_uploadfile_label_info02").css('color', 'green');
                            $(".c_model_add_image_ui").addClass('class_hide_mask_div');
                        } else {
                            $(".c_uploadfile_label_info02").html("下载镜像失败 !");
                            $(".c_uploadfile_label_info02").css('color', 'red');
                        }
                    },
                    error: function (callback) {
                        $(".c_uploadfile_label_info02").html("镜像下载失败 !");
                        $(".c_uploadfile_label_info02").css('color', 'red');
                        alert('镜像下载失败');
                        document.getElementById('idIframeImageManager').contentWindow.location.reload(true);
                    }
                });


                //在这里添加下载一个镜像的功能 -end


                function cleanMessage() {
                    $(".c_uploadfile_label_info02").html("");
                    $(".c_uploadfile_label_info02").css('color', 'green');
                }

                window.setTimeout(cleanMessage, 3000);
                return
            }
        }

    </script>

</head>
<body>
<div class="c_main">
    <div class="c_top">
        <img class="c_logo" src="/static/images/logo.png" style="display: none" alt="">
        <label class="c_label_username" id="id_label_username">{{username}}</label>
        <input type="button" id="id_btn_logout" class="c_btn_logout" value="注销">
    </div>

    <div class="c_mid">
        <div class="c_left">
            <button class="c_left_item" id="id_left_item_host">节点管理</button>
            <!--<button class="c_left_item" id="id_left_item_store">存储管理</button>-->
            <button class="c_left_item" id="id_left_item_images">镜像管理</button>
            <button class="c_left_item" id="id_left_item_docker">容器管理</button>
            <!--<button class="c_left_item" id="id_left_item_user">用户管理</button>-->
            <!--<button class="c_left_item" id="id_left_item_per">权限管理</button>-->
            <!--<button class="c_left_item" id="id_left_item_sys">系统设置</button>-->
            <!--<button class="c_left_item" id="id_left_item_license">授权设置</button>-->
        </div>
        <div class="c_tab_main">
            <div class="c_manager_main">
                <div class="c_tab_div_rem c_tab_main_host">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 节点管理</label>
                        <div class="c_action_hostmanager">
                            <input type="button" id="id_add_host_button_ui" value="添加">
                            <!--<input type="button" value="删除">-->
                            <input type="button" id="id_update_host_button_ui" value="刷新">
                        </div>
                    </div>
                    <div class="c_hostmanager_iframe">
                        <style>
                            #idIframeHostManager {
                                width: 100%;
                                height: 100%;
                                margin: 0;
                                padding: 0;
                            }
                        </style>
                        <iframe id="idIframeHostManager" name="ifrmname" src="hostmanager"
                                frameborder="0"></iframe>
                    </div>
                </div>
                <div class="item_tab_remove_div c_tab_div_rem c_tab_main_store">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 存储管理</label>
                        <div class="c_action_hostmanager">
                            <input type="button" id="id_add_daemon_button_ui" value="添加">
                            <input type="button" id="id_update_daemon_button_ui" value="刷新">
                        </div>
                    </div>

                    <div class="c_storemanager_iframe">

                        <style>
                            #idIframeStoreManager {
                                width: 100%;
                                height: 100%;
                                margin: 0;
                                padding: 0;
                            }
                        </style>
                        <iframe id="idIframeStoreManager" name="ifrmname" src="storemanager"
                                frameborder="0"></iframe>

                    </div>

                </div>
                <div class="item_tab_remove_div c_tab_div_rem c_tab_main_images">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 镜像管理</label>
                        <div class="c_action_hostmanager">
                            <input type="button" id="id_add_images_button_ui" value="添加">
                            <input type="button" id="id_update_images_button_ui" value="刷新">
                        </div>
                    </div>

                    <div class="c_imagesmanager_iframe">

                        <style>
                            #idIframeImageManager {
                                width: 100%;
                                height: 100%;
                                margin: 0;
                                padding: 0;
                            }
                        </style>
                        <iframe id="idIframeImageManager" name="ifrmname" src="imagesmanager"
                                frameborder="0"></iframe>

                    </div>

                </div>


                <div class="item_tab_remove_div c_tab_div_rem c_tab_main_docker">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 容器管理</label>
                        <div class="c_action_hostmanager">
                            <input type="button" id="id_add_container_button_ui" value="创建">
                            <input type="button" id="id_update_container_button_ui" value="刷新">
                        </div>
                    </div>

                    <div class="c_imagesmanager_iframe">

                        <style>
                            #idIframeContainerManager {
                                width: 100%;
                                height: 100%;
                                margin: 0;
                                padding: 0;
                            }
                        </style>
                        <iframe id="idIframeContainerManager" name="ifrmname" src="managercontainer"
                                frameborder="0"></iframe>
                    </div>
                </div>


                <div class="item_tab_remove_div c_tab_div_rem c_tab_main_user">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 用户管理</label>
                    </div>
                </div>
                <div class="item_tab_remove_div c_tab_div_rem c_tab_main_permissions">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 权限管理</label>
                    </div>
                </div>
                <div class="item_tab_remove_div c_tab_div_rem c_tab_main_system">
                    <div class="c_tab_main_top">
                        <label class="c_label_tabname">当前页面 > 系统设置</label>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

<!--定义了一个背景透明的遮罩-->
<div class="c_model_ui class_mask_div class_hide_mask_div"></div>
<div class="c_model_ui class_model_add_mark_ui class_hide_mask_div">
    <div class="class_input_top_style_01">添加主机</div>
    <div class="c_model_add_host_div_input">
        <form id="addHostForm" action="">
            <div>
                <input id="id_edit_input_id" name="nid" type="text" style="display: none;">
            </div>
            <div>
                <label class="class_label_style_01">主机名:</label>
                <input class="class_input_style_01" name="hostname" value="" id="inputHostNameM" type="text"
                       autocomplete="off">
                <span style="color: red">*</span>
            </div>
            <div>
                <label class="class_label_style_01">地址:</label>
                <input class="class_input_style_01" name="hostaddress" value="" id="inputHostAddressM" type="text"
                       autocomplete="off">
                <span style="color: red">*</span>
            </div>
            <div>
                <label class="class_label_style_01">描述:</label>
                <input class="class_input_style_01" name="describe" value="" id="describeM" type="text"
                       autocomplete="off">
            </div>
        </form>
    </div>
    <div id="idModelAddHostDivMessage" class="c_model_add_host_div_message"></div>
    <div class="c_model_add_host_div_bom">
        <div>
            <input id="id_button_add" class="c_inputbutton_group class_button_style_01" type="button" value="添加">
            <input id="id_button_cel" class="c_inputbutton_group class_button_style_01" type="button" value="取消">
        </div>
    </div>
</div>


<div class="c_model_add_image_ui class_mask_div class_hide_mask_div"></div>
<div class="c_model_add_image_ui class_model_add_mark_ui class_hide_mask_div" style="height: 450px">
    <div class="class_input_top_style_01">添加镜像</div>
    <div class="c_model_add_image_div_input">
        <div class="cc_main">
            <div class="c_radio_choose_01">
                <div class="c_item_style_01">
                    <label>选择创建镜像类型 :</label>
                    <select style="margin-top: 10px;height: 25px" id="id_select_create_image_type">
                        <option>上传一个本地镜像</option>
                        <option>创建一个本地镜像</option>
                        <option>下载一个远程镜像</option>
                    </select>
                </div>

                <div class="c_images_name c_item_style_01">
                    <label> 请输入镜像名称 :</label>
                    <input id="id_input_image_name" type="text"><br>
                </div>

                <div class="c_item_style_01">
                    <label> 请选择一个节点 :</label>
                    <select id="id_select_nodes">
                    </select>
                </div>

                <div class="c_choose_container c_item_style_01 class_hide_mask_div">
                    <label style="margin-right: 10px">选择一个容器 :</label>
                    <select id="id_select_container">
                    </select>
                </div>

                <div class="c_upload_local_image c_item_style_01">
                    <label style="margin-right: 10px">选择一个本地镜像 :</label>
                    <input type="file" value="浏览" name="uploadfile" id="id_file_upload02"><br>
                </div>

                <div style="padding: 10px" class="c_item_style_01">
                    <hr style='margin-bottom: 10px'>
                    <label style="padding-bottom: 5px">简单的写一下描述或者用途把 :</label>
                    <br>
                    <textarea style="resize:none;height: 80px;width: 400px;font: 16px/16px 'Microsoft YaHei UI'" name=""
                              id="id_textarea_image_des">

                    </textarea>
                </div>

                <label class="c_uploadfile_label_info02" style="color: green;"></label>
            </div>


        </div>
    </div>
    <div id="idModelAddImageDivMessage" class="c_model_add_host_div_message"></div>
    <div class="c_model_add_host_div_bom">
        <div>
            <input id="id_button_image_add" class="c_inputbutton_group class_button_style_01" type="button" value="添加"
                   onclick="imageCreate()">
            <input id="id_button_image_cel" class="c_inputbutton_group class_button_style_01" type="button" value="取消">
        </div>
    </div>
</div>


<div class="c_model_add_container_ui class_mask_div class_hide_mask_div"></div>
<div class="c_model_add_container_ui class_model_add_container_ui class_hide_mask_div">
    <div class="class_input_top_style_01">添加容器</div>
    <div class="c_model_add_image_div_input">
        <div class="cc_main">
            <div class="c_item_style_02">
                <div class="c_div_style_02">
                    <label class="class_label_style_01"> 请输入容器名称:</label>
                    <input class="class_input_style_01" id="id_input_container_name" type="text">
                    <label style="color: red">* </label>
                    <label> ( <span style="color: red;">*</span> 为必填项)</label>
                </div>

                <div class="c_div_style_02">
                    <label class="class_label_style_01"> 请选择一个节点:</label>
                    <select class="class_input_style_01" id="id_select_container_nodes"
                            style="width: 307px;"></select>
                    <label style="color: red">*</label>
                </div>

                <div class="c_choose_image c_div_style_02">
                    <label class="class_label_style_01">选择一个镜像:</label>
                    <select class="class_input_style_01" id="id_select_image" style="width: 307px;"></select>
                    <label style="color: red">*</label>
                </div>

                <div class="c_command c_div_style_02">
                    <label class="class_label_style_01">运行命令:</label>
                    <input class="class_input_style_01" id="id_input_command" type="text">
                    <label style="color: red">*</label>
                </div>

                <div class="c_choose_cpu_core c_div_style_02">
                    <label class="class_label_style_01">cpu核心数:</label>
                    <select class="class_input_style_01" id="id_select_cpu_core" style="width: 307px;"></select>
                    <label style="color: red">*</label>
                </div>

                <div class="c_mem_size c_div_style_02">
                    <label class="class_label_style_01">内存(M):</label>
                    <input class="class_input_style_01" id="id_input_mem_size" type="text">
                    <label style="color: red">*</label>
                </div>

                <hr style='margin-top: 20px'>

                <div class="c_port_mapped c_div_style_02">
                    <label class="class_label_style_01">端口映射列表:</label>
                    <input class="class_input_style_01" id="id_input_port_mapped" type="text"
                           placeholder="22:8022, ... ">
                </div>

                <div class="c_dir_mapped c_div_style_02">
                    <label class="class_label_style_01">工作目录映射列表:</label>
                    <input class="class_input_style_01" id="id_input_dir_mapped" type="text"
                           placeholder="本地目录:容器内部目录, ... ">
                </div>
            </div>


        </div>
    </div>
    <div id="idModelAddContainerDivMessage" style="padding-top: 100px;" class="c_model_add_host_div_message"></div>
    <div class="c_model_add_host_div_bom">
        <div>
            <input id="id_button_container_add" class="c_inputbutton_group class_button_style_01" type="button"
                   value="添加" onclick="create_container_to_node()">
            <input id="id_button_container_cel" class="c_inputbutton_group class_button_style_01" type="button"
                   value="取消" onclick="hide_mask_div()">
        </div>
    </div>
</div>


</body>
</html>